import React, { Component } from 'react'
import Header from '../header.jsx'
import Footer from '../footer'
import Guang from '../oec/guanggao'
import Xiang from './xiangmu'
import Dong from './dongtai'
import '../../scss/eoc/oec.scss'
import { NavLink } from 'react-router-dom'
class OEC extends Component {
    constructor() {
        super()
        this.state = {
            header: 'OEC详情',
            item: {
                name: 'OEC',
                num: '200,000',
                describe: 'OE是以区块链底层技术为架构，存储为底层，…',
                tiem: "18天19时41",
                qiang: '91.79',
                back: 'linear-gradient(270deg, #ff8d8d 0%, #ffdc65 98%)'
            },
            num: 2
        }
    }
    //     backClick(){
    //         this.props.history.go(-1)
    //    }
    render() {
        const { header, item, num } = this.state
        return (
            <div className='oec'>
                <Header header={header}></Header>
                <main>
                    {/* 这是那个灰色的夹层 */}
                    {/* <Guang /> */}
                    <div className='main'>
                        <div className='main-top'>
                            <div className='jb1' style={{ backgroundImage: item.back }}>
                                <div className='jb-top'>
                                    <div className='jb-top-l'>
                                        {/* 头像 那个空白圆 */}
                                        <div className='header-img left'></div>
                                        {/* 主播名字 */}
                                        <div className='header-name left'>
                                            {item.name}
                                        </div>
                                        <div className='clear'></div>
                                    </div>
                                    <div className='jb-top-r right'>
                                        {item.num}
                                        <span>
                                            {item.nam}
                                        </span>
                                    </div>
                                </div>
                                <div className='jb-bot'>
                                    <div>
                                        {
                                            item.describe
                                        }
                                    </div>
                                    <div className='jdt'></div>
                                    <div className='jb-bot-bot'>
                                        <span className='left'>
                                            还剩{item.time}分
                                        </span>
                                        <span className='right'>
                                            还剩可抢{item.qiang}%
                                         </span>
                                        <div className='clear'></div>
                                    </div>
                                </div>
                                {/* 这是那个按钮 ,立即执行*/}
                                <div className='main-top-btn'>
                                    立即领取
                            </div>
                            </div>

                            {/* 关，去，邀 */}
                            <div className='main-top-gqy'>
                                <div>
                                    <span className='gqy-img'></span>
                                    <NavLink to='/g'>
                                        <span>官方社群</span>
                                    </NavLink>

                                </div>
                                <div className='main-top-gqy-center'>
                                    <span className='gqy-img'></span>
                                    <span>做任务</span>
                                </div>
                                <div>
                                    <span className='gqy-img'></span>
                                    <span>邀请好友</span>
                                </div>
                            </div>
                        </div>
                        <div className='main-main'>
                            <div className='nav'>
                                <span className={num === 1 ? 'nav-span' : ''} onClick={() => this.setState({ num: 1 })}>项目</span>
                                <span className={num === 2 ? 'nav-span' : ''} onClick={() => this.setState({ num: 2 })}>最新动态</span>
                            </div>
                            <div className='text_box'>
                                {
                                    num === 1 ? <Xiang></Xiang> : ''
                                }
                                {
                                    num === 2 ? <Dong></Dong> : ''
                                }

                            </div>
                        </div>
                    </div>
                </main>
                {/* <button onClick={()=>this.backClick()}>点击</button> */}
                <Footer></Footer>
            </div>
        )
    }
}
export default OEC
